<!DOCTYPE html>
<html>
    <head>
        <title>Itowns - multiglobe</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <style type="text/css">
            #help {
                position: absolute;
                top: 0;
                width: 100%;
                color: white;
                font-size: 2em;
                text-align: center;
            }
        </style>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <span id="help">Press <em>Space</em> to switch globe</span>
        <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script type="text/javascript">
            /* global itowns,document,GuiTools*/
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
                range: 35000000,
            }

            // iTowns namespace defined here
            var viewerDiv = document.getElementById('viewerDiv');

            // object3ds contains references to the globes' object3d, it is used in the animator
            // function to change from one globe to the other
            var object3d;
            var object3ds = [];
            var front = 0;

            // Create the first globe
            object3d = new itowns.THREE.Object3D();
            var view = new itowns.GlobeView(viewerDiv, placement, { noControls: true, object3d });
            setupLoadingScreen(viewerDiv, view);
            object3ds.push(object3d);

            const atmosphere3D = view.getLayerById('atmosphere').object3d;

            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer('Ortho', config);
                view.addLayer(layer);
            });

            // Create a second smaller globe
            object3d = new itowns.THREE.Object3D();
            object3d.scale.divideScalar(3);
            object3d.position.y = 10000000;
            object3d.updateMatrixWorld();
            const globe2 = new itowns.GlobeLayer('globe2', object3d);
            object3ds.push(object3d);

            // define pole texture
            globe2.diffuse = new itowns.THREE.Color(0xd0d5d8);

            // add globe2 to the view so it gets updated
            itowns.View.prototype.addLayer.call(view, globe2);
            itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(osm) {
                osm.source = new itowns.TMSSource(osm.source);
                var layer = new itowns.ColorLayer(osm.id, osm);
                itowns.View.prototype.addLayer.call(view, layer, globe2);
            });

            // Globe animation
            // Exchange postion and scale of globes in a 1 second animation
            var t = 0;
            function animator (dt, ignore) {
                // "dt" is time difference in ms between this animation step and the previous one
                // "ignore" is true if this is the first animation step
                t = ignore ? 0 : Math.min(1, dt / 1000 + t);

                object3ds[front].position.y = itowns.THREE.MathUtils.lerp(front ? 10000000 : -10000000, 0, t);
                object3ds[front].scale.setScalar(itowns.THREE.MathUtils.lerp(0.3, 1, t));

                object3ds[1 - front].position.y = itowns.THREE.MathUtils.lerp(front ? -10000000 : 10000000, 0, 1 - t);
                object3ds[1 - front].scale.setScalar(itowns.THREE.MathUtils.lerp(0.3, 1, 1 - t));

                atmosphere3D.position.y = object3ds[0].position.y;
                atmosphere3D.scale.copy(object3ds[0].scale);
                atmosphere3D.updateMatrixWorld(true);

                object3ds[0].updateMatrixWorld(true);
                object3ds[1].updateMatrixWorld(true);

                if (t < 1) {
                    // animation is not finished, schedule a new view update
                    view.notifyChange(view.camera.camera3D);
                } else {
                    // animation is finished, remove the frame requester
                    view.removeFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, animator);
                }
            }

            // Swap globe place on 'space' key
            function onKeyPress(evt) {
                if (evt.keyCode == 32) {
                    front = 1 - front;
                    t = 0;
                    // schedule the animation
                    view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, animator);
                    view.notifyChange(view.camera.camera3D);
                }
            }
            viewerDiv.focus();
            viewerDiv.addEventListener('keyup', onKeyPress);

            // Zoom on mouse-wheel
            var onMouseWheel = function onMouseWheel(event) {
                var geo = new itowns.Coordinates('EPSG:4978', view.camera.camera3D.position).as('EPSG:4326');
                // WebKit / Opera / Explorer 9
                if (event.wheelDelta !== undefined) {
                    delta = event.wheelDelta;
                // Firefox
                } else if (event.detail !== undefined) {
                    delta = -event.detail;
                }

                if (delta > 0) {
                    geo.altitude *= 0.9;
                } else {
                    geo.altitude *= 1.1;
                }
                view.camera.camera3D.position.copy(geo.as('EPSG:4978'));
                view.notifyChange(view.camera.camera3D);
            };
            viewerDiv.addEventListener('DOMMouseScroll', onMouseWheel);
            viewerDiv.addEventListener('mousewheel', onMouseWheel);
        </script>
    </body>
</html>
